'use client';

import { lazy, useEffect } from 'react';
import { getWidgets, screenName, registerWidget } from './screen';
import { usePathname, useSearchParams } from 'next/navigation';
import { useRouter } from 'next/navigation';

registerWidget({
    name: 'part0',

    element: lazy(() =>
        Promise.resolve({
            default: (props: any) => {
                const pathname = usePathname();
                const router = useRouter();
                const search = useSearchParams();

                useEffect(() => {
                    props.showWidgetGroup({ groupFilterId: '1' });
                    setInterval(() => {
                        props.dispatch('aa', Math.random());
                    }, 1000);
                }, []);
                return (
                    <span>
                        auto dispatch
                        <div>
                            {pathname}
                            <button
                                className='btn'
                                onClick={() => {
                                    const se = new URLSearchParams(search.toString());
                                    se.set('a', `${Math.random()}`);
                                    router.push(`/demo?${se.toString()}`);
                                    props.showWidgetGroup({ groupFilterId: '2' });
                                }}
                            >
                                click
                            </button>
                        </div>
                    </span>
                );
            },
        })
    ),
    layout: {
        left: 200,
        top: 0,
        width: 0,
        height: 0,
    },
    subscribe: {},
});

registerWidget({
    name: 'part1',
    group: '1',
    element: lazy(() => Promise.resolve({ default: (props: any) => <span>{props.show ?? 'init'}</span> })),
    layout: {
        left: 0,
        top: 0,
        width: 200,
        height: 20,
    },
    subscribe: {
        show: 'aa',
    },
    animateCss: 'animate__fadeInLeft',
});

registerWidget({
    name: 'part2',
    group: '2',
    element: lazy(() => Promise.resolve({ default: (props: any) => <span>p2: {props.show ?? 'init'}</span> })),
    layout: {
        left: 0,
        top: 0,
        width: 200,
        height: 20,
    },
    subscribe: {
        show: 'aa',
    },
    animateCss: 'animate__fadeInLeft',
});

export {
    //
    getWidgets,
    screenName,
};
